<template>
  <div class="page-container titlebar-page">
    <TitleBar title="铭文模拟器"></TitleBar>
    <div class="ins-panel" ref="insPanel">
      <img class="ins-bg" src="../../assets/images/ins-panel-bg.png" alt="" srcset="">
      <ul v-for="(line, i) of hexagon" :key="i" class="line">
        <li v-for="(single, j) of line" :key="j" class="single" @click="openInsItems(single, i, j)">
          <hexagon-slice-six-icon
            v-if="single !== 0 && single.ins == null"
            :size="iconSize"
            :style="{color: colors[single.type]}"
          ></hexagon-slice-six-icon>
          <div v-if="single.ins" class="ins-icon">
            <img :src="single.ins.insUrl" alt srcset>
          </div>
        </li>
      </ul>
    </div>

    <!-- 铭文属性列表 -->
    <div class="ins-properties">
      <div class="property-wrapper left">
        <div class="title">
          <div>通用属性</div>
        </div>
        <div class="property-details">
          <table>
            <tr v-for="(item, key) of common" :key="key">
              <td class="name">{{key | InsProp}}</td>
              <td class="value">{{item | NumberHandle}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="property-wrapper">
        <div class="title">
          <div>冒险属性</div>
        </div>
        <div class="property-details">
          <table>
            <tr v-for="(item, key) of adventure" :key="key">
              <td class="name">{{key | InsProp}}</td>
              <td class="value">{{item | NumberHandle}}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="ins-actions">
      <div class="level">
        铭文总等级:
        <span style="color: #3dc4e9;">{{insLevel}}</span>
      </div>
      <div class="actions">
        <div class="action-btn" @click="reset">重置</div>
        <!-- <div class="action-btn" @click="save">保存</div> -->
      </div>
    </div>
    <div class="dialog-wrapper" v-if="dialog" id="dialog-wrapper" @click="closeDialog($event)">
      <div class="dialog">
        <div class="dialog-title">
          <h2>铭文等级</h2>
          <!-- <div class="ins-level-wrapper">
            <span v-for="i of 5" :key="i" class="ins-level" @click="changeInsLevel(i)">
              <hexagon-icon
                class="hexagon-icon"
                
                :style="{color: insLevelSelected === i ? '#dabd1a' : '#9f9f9f'}"
              ></hexagon-icon>
              <span class="number">{{i}}</span>
            </span>
          </div>-->
        </div>
        <div class="dialog-content" v-show="insDetail">
          <div
            class="ins-item"
            v-for="(item, i) of filterInsList"
            :key="i"
            @click="showInsDetails(item, i)"
          >
            <div class="icon-name">
              <!-- <hexagon-slice-six-icon :size="34" :style="{color: '#F44336'}"></hexagon-slice-six-icon> -->
              <img :src="item.insUrl" alt srcset>
              <span>{{insLevelSelected}}级 {{item.insName}}</span>
            </div>
            <ul class="ins-effect-list">
              <li v-for="(ef, key) of item.effects" :key="key">
                <div class="wrapper" v-if="commonProp.indexOf(key) == -1">
                  <div class="effect-name">{{key | InsProp}}</div>
                  <div class="effect-value">{{ef}}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="content-detail" v-show="!insDetail">
          <div class="icon">
            <img :src="insSelected.insUrl" alt="" srcset="">
          </div>
          <div class="level-name">
            5级 {{insSelected.insName}}
          </div>
          <div class="ins-properties">
            <div class="property-wrapper left">
              <div class="title">
                <div>通用属性</div>
              </div>
              <div class="property-details">
                <table>
                  <tr v-for="(item, key) of insSelCommon" :key="key">
                    <td class="name">{{key | InsProp}}</td>
                    <td class="value">{{item | NumberHandle}}</td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="property-wrapper">
              <div class="title">
                <div>冒险属性</div>
              </div>
              <div class="property-details">
                <table>
                  <tr v-for="(item, key) of insSelAdventure" :key="key">
                    <td class="name">{{key | InsProp}}</td>
                    <td class="value">{{item | NumberHandle}}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>

          <div class="actions">
            <div class="add" @click="addToTheGraph(1)">单独添加</div>
            <div class="add" @click="addToTheGraph(2)">全部添加</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleBar from "../../components/TitleBar";
import { cloneDeep } from "lodash";
import { mapState } from "vuex";
const HEXAGON = [
  [
    0,
    { type: 3, ins: null },
    { type: 3, ins: null },
    0,
    0,
    { type: 1, ins: null },
    { type: 1, ins: null },
    0
  ],
  [
    { type: 3, ins: null },
    { type: 3, ins: null },
    0,
    0,
    0,
    { type: 1, ins: null },
    { type: 1, ins: null }
  ],
  [
    { type: 3, ins: null },
    0,
    0,
    { type: 2, ins: null },
    { type: 2, ins: null },
    0,
    0,
    { type: 1, ins: null }
  ],
  [
    { type: 3, ins: null },
    0,
    { type: 2, ins: null },
    { type: 2, ins: null },
    { type: 2, ins: null },
    0,
    { type: 1, ins: null }
  ],
  [
    { type: 3, ins: null },
    0,
    { type: 2, ins: null },
    { type: 2, ins: null },
    { type: 2, ins: null },
    { type: 2, ins: null },
    0,
    { type: 1, ins: null }
  ],
  [
    { type: 3, ins: null },
    0,
    0,
    { type: 2, ins: null },
    0,
    0,
    { type: 1, ins: null }
  ],
  [
    0,
    { type: 3, ins: null },
    { type: 3, ins: null },
    0,
    0,
    { type: 1, ins: null },
    { type: 1, ins: null },
    0
  ]
];
export default {
  data() {
    return {
      insDetail: true,
      iconSize: 50,
      hexagon: [],
      insLevelSelected: 5,
      insTypeSelected: 1,
      colors: ["transparent", "#1e7ba5", "#309f40", "#b7463e"],
      // 选择的铭文
      insSelected: {},
      // 需要填充的铭文图标
      insItem: {},
      dialog: false,
      commonProp: ["physicalAttack2", "spellAttack2", "maxHealth2"],
      adventureProp: [],
      common: {},
      adventure: {},
      insSelCommon: {},
      insSelAdventure: {},
      insLevel: 0
    };
  },
  mounted() {
    let height = this.$refs.insPanel.clientHeight;
    this.iconSize = (Math.floor(height / 6.2));
    this.hexagon = cloneDeep(HEXAGON);
  },
  filters: {
    NumberHandle: function(val) {
      let str = val + "";
      let sp;
      if (str.match(/\./)) {
        sp = str.split(".");
        if (sp[1].length > 6) {
          return `${sp[0]}.${sp[1].substring(0, 2)}`;
        }
      }
      return val;
    }
  },
  computed: {
    ...mapState(["ins_list"]),
    filterInsList() {
      return this.ins_list.filter(item => {
        return item.insType === this.insTypeSelected;
      });
    }
  },
  methods: {
    closeDialog($event) {
      $event.stopPropagation();
      $event.preventDefault();
      if ($event.target.id === "dialog-wrapper") {
        this.dialog = false;
        this.insDetail = true;
      }
    },
    openInsItems(single, i, j) {
      this.dialog = true;
      this.insTypeSelected = single.type;
      this.insItem = { single, i, j };
    },
    changeInsLevel(i) {
      this.insLevelSelected = i;
    },
    showInsDetails(ins, i) {
      this.insSelected = ins;
      this.insDetail = false;
      for(let key in ins.effects) {
        if(this.commonProp.indexOf(key) !== -1) {
          this.insSelCommon[key] = ins.effects[key];
        } else {
          this.insSelAdventure[key] = ins.effects[key];
        }
      }
    },
    addToTheGraph(type) {
      this.insDetail = true;
      this.dialog = false;
      let { single, i, j } = this.insItem;
      // 单独添加
      if (type === 1) {
        this.hexagon[i][j].ins = this.insSelected;
      } else {
        // 全部添加
        this.hexagon.forEach((hex, m) => {
          hex.forEach((h, n) => {
            if (h.type === single.type) {
              h.ins = this.insSelected;
            }
          });
        });
      }
    },
    reset() {
      // this.hexagon = HEXAGON.slice();
      this.$set(this, "hexagon", cloneDeep(HEXAGON));
    },
    save() {
      let hex = this.hexagon.slice();
    }
  },
  watch: {
    hexagon: {
      handler: function(newVal, oldVl) {
        let common = {};
        let adventure = {};
        let insLevel = 0;
        newVal.forEach((item, i) => {
          if (item) {
            item.forEach((jtem, j) => {
              if (jtem) {
                if (jtem.ins) {
                  insLevel += 5;
                  for (let key in jtem.ins.effects) {
                    if (this.commonProp.indexOf(key) !== -1) {
                      if (common[key] !== undefined) {
                        common[key] += jtem.ins.effects[key];
                      } else {
                        common[key] = jtem.ins.effects[key];
                      }
                    } else {
                      if (adventure[key] !== undefined) {
                        adventure[key] += jtem.ins.effects[key];
                      } else {
                        adventure[key] = jtem.ins.effects[key];
                      }
                    }
                  }
                }
              }
            });
          }
        });
        this.insLevel = insLevel;
        this.common = common;
        this.adventure = adventure;
      },
      deep: true
    }
  },
  components: {
    TitleBar
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@single-unit: 1.12rem;
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .ins-panel {
    height: 48%;
    display: flex;
    flex-direction: column;
    border-bottom: 0.6px solid #c0c0c0;
    // background-image: url('../../assets/images/ins-panel-bg.png');
    // background-size: 100% 100%;
    padding-top: 0.5rem;
    position: relative;
    .ins-bg {
      z-index: -1;
      left: 0;
      top:0 ;
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .line {
      display: flex;
      justify-content: center;
      // margin-top: 2px;
      // margin-bottom: 2px;
    }
    .single {
      display: flex;
      align-items: center;
      justify-content: center;
      width: @single-unit * 2;
      height: @single-unit * 2;
      margin: 0px 4px;
      .ins-icon {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 120%;
          height: 110%;
        }
      }
    }
  }
  .ins-properties {
    height: 44%;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    .property-wrapper {
      flex: 1;
      height: 100%;
      &.left {
        border-right: 0.6px solid #c0c0c0;
      }
      .title {
        height: 1.4rem;
        display: flex;
        justify-content: center;
        align-items: center;
      margin-top: 0.3rem;
        div {
          font-size: 0.78rem;
          border-radius: 4px;
          width: 60%;
          padding: 3px 7px;
          background-color: #c0c0c0;
          color: black;
          text-align: center;
          height: 1rem;
          line-height: 1rem;
          vertical-align: middle;
        }
      }
      .property-details {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        height: 80%;
        overflow-x: hidden;
        overflow-y: scroll;
        .name {
          font-size: 0.72rem;
        }
        .value {
          font-size: 0.68rem;
          color: #41c2e9;
        }
      }
    }
  }
  .ins-actions {
    height: 6%;
    width: 100%;
    border-top: 0.6px solid #c0c0c0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    .level {
      font-size: 0.9rem;
    }
    .actions {
      display: flex;
      justify-content: space-around;
      .action-btn {
        width: 3rem;
        height: 1rem;
        border: 1px solid #9f9f9f;
        color: #9f9f9f;
        padding: 3px 6px;
        font-size: 0.8rem;
        text-align: center;
        line-height: 1rem;
        vertical-align: middle;
        margin: 0 0.8rem;
      }
    }
  }
  .dialog {
    width: 88%;
    // min-height: 67%;
    padding-bottom: 10%;
    .dialog-title {
      height: 3rem;
      border-bottom: 0.6px solid #c0c0c0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 0.4rem;
      padding-right: 0.4rem;
      h2 {
        font-weight: normal;
        width: 4rem;
        display: inline-block;
        font-size: 1rem;
      }
      .ins-level-wrapper {
        width: 6rem;
        display: flex;
        justify-content: space-around;
        flex-direction: row-reverse;
        height: 1rem;
        .ins-level {
          position: relative;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 1rem;
          width: 1rem;
          .hexagon-icon {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 1px;
            left: 0;
            z-index: 1;
          }
          .number {
            color: white;
            font-size: 0.5rem;
            z-index: 2;
          }
        }
      }
    }
    .dialog-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      .ins-item {
        flex-basis: 33.33%;
        box-sizing: border-box;
        height: 5rem;
        display: flex;
        flex-direction: column;
        border-bottom: 0.6px solid #c0c0c0;
        border-right: 0.6px solid #c0c0c0;
        .icon-name {
          flex: 1;
          display: flex;
          justify-content: space-around;
          align-items: center;
          font-size: 0.76rem;
          img {
            width: 2rem;
            height: 2rem;
          }
        }
        .ins-effect-list {
          display: flex;
          flex-direction: column;
          flex: 1;
          li {
            .wrapper {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 8px;
              .effect-name {
                font-size: 0.5rem;
                white-space: nowrap;
              }
              .effect-value {
                font-size: 0.4rem;
                color: #2348f0;
              }
            }
          }
        }
      }
    }
    .content-detail {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60%;
      flex-wrap: wrap;

      .icon {
        flex-basis: 100%;
        height: 3rem;
        text-align: center;
        img {
          width: 3rem;
          height: 3rem;
        }
      }
      .level-name {
        flex-basis: 100%;
        font-size: 0.96rem;
        height: 2.4rem;
        text-align:center;
      }
      .ins-properties {
    min-height: 80%;
    width: 100%;
        flex-basis: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    .property-wrapper {
      flex: 1;
      height: 100%;
      padding-top: 0.3rem;
      .title {
        height: 1.4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          font-size: 0.78rem;
          border-radius: 4px;
          width: 60%;
          padding: 3px 7px;
          background-color: #c0c0c0;
          color: black;
          text-align: center;
          height: 1rem;
          line-height: 1rem;
          vertical-align: middle;
        }
      }
      .property-details {
        display: flex;
        justify-content: center;
        align-items: center;
        .name {
          font-size: 0.65rem;
        }
        .value {
          font-size: 0.58rem;
          color: #41c2e9;
        }
      }
    }
  }
      .actions {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 1rem;
        .add {
        width: 5rem;
        height: 1.4rem;
        line-height: 1.4rem;
        font-size: 0.9rem;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #df963f;
        color: #df963f;
        position: relative;
        bottom: 0;
      }
      }
      
    }
  }
}
</style>